<!DOCTYPE html>
<html lang="zh-CN">

<head>
	{% include 'header_content',hide_favicon:true %}
	{{  'public.js' | public_assets_dir_content  }}
	<link rel="stylesheet" type="text/css" href="{{ 'theme.css' | public_asset_abs_dir_url }}">

    <style type="text/css">
    	
		#module_login{
			display: flex;
		    align-items: center;
		    justify-content: center;
		    height: 100vh;
		    text-align: center;
				width:530px;
				margin: 0 auto;
		}
		#module_login .module_login_wrapper{
				width: 100%;
		}
		#module_login .logo{
			margin-bottom: 60px;
			font-size: 0;

		}
    	#module_login .logo a{
		    font-size: var(--title_font_size);
		    color: var(--title_color);
		    font-family: var(--title_font_family);
		    font-style: var(--title_font_style);
		    font-weight: var(--title_font_weigth);
		    letter-spacing: var(--title_letter_spacing);
			display: inline-flex;
			align-items: center;
			line-height: 1;

				
		}
		#module_login .logo span{
			line-height: 24px;
			font-weight: bold;

		}
		#module_login .logo img{
		    max-height: 60px;
		    max-width: 300px;
		}
		#module_login .logo img.favicon{
			width: 36px;
			height: 36px;
			margin-right: 16px;
		}
		#module_login .logo .logo-block{
				height: 36px;
		    width: 36px;
				font-size:18px;
				line-height:36px;
				text-align:center;
				margin-right:16px;
				background: #242F48;
				border-radius: 4px;
				color: rgba(255, 255, 255, 0.7);
		}
		#module_login .module_login_header{
			margin-bottom: 40px;
		}
		#module_login .module_login_title{
			line-height: 1.3;
			color: var(--title_color);
		}
		#module_login .module_login_detail{
			margin-top: 20px;
		}
		#module_login .mo-form{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
		}
		#module_login .mo-form .mo-form-item{
			margin-bottom: 0;
		}
		#module_login .mo-form .mo-form-item:last-child{
			margin: 0 0 0 15px;
		}
		#module_login .mo-form .mo-form-item:first-child{
			width: calc(100% - 130px);
		}

		#module_login .mo-form-input{
			height: 48px;
		}
		#module_login .mo-form .form_btn{
			min-width: 120px;
		}

			@media screen and (max-width: 767px){
				#module_login{
				width: 100%;
				padding: 0 15px;
				box-sizing: border-box;
			}
			#module_login .mo-form{
				display: inline;
			}
			#module_login .mo-form .mo-form-item{
				width: 100% !important;
				margin: 15px 0 0 0 !important;
			}
			#module_login .mo-form .form_btn{
				width: 100%;
				margin-left: 0;
			}
			#module_login .logo{
				margin-bottom: 40px;
			}
		}
    </style>
</head>
<body>
    <div class="module_login_default" id="module_login">
		<div class="module_login_wrapper">
			<div class="logo">
				<a>
					{% comment %} <svg t="1688966739497" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17605" width="36" height="36"><path d="M0 0m128 0l768 0q128 0 128 128l0 768q0 128-128 128l-768 0q-128 0-128-128l0-768q0-128 128-128Z" fill="#F2170F" p-id="17606"></path><path d="M478.912 627.2a46.848 46.848 0 0 0 92.16 0l30.72-422.4a76.8 76.8 0 0 0-76.8-76.8 78.912 78.912 0 0 0-76.8 84.48z m46.08 115.2a76.8 76.8 0 1 0 76.8 76.8 72.576 72.576 0 0 0-76.8-76.8z" fill="#FFFFFF" p-id="17607"></path></svg> {% endcomment %}
					{% assign name_size = storeConfig.name.size %}
					{%- if name_size > 3 -%}
						<span class="shop_name">{{ storeConfig.name | slice: 0,1}}***{{ storeConfig.name | slice: -1, name_size}}</span>
					{%- else -%}
						<span class="shop_name">{{ storeConfig.name | slice: 0,1}}***</span>
					{%- endif -%}
				</a>
			</div>
			<div class="module_login_header">
				<div class="module_login_title">{{ firewall_rule.tips }}</div>
			</div>
			
			{% if firewall_rule.type == 3 %}
			<div class="mo-form" id="login-form">
				<div class="mo-form-item" name="module_login_txt">
					<div class="mo-form-item-value">
						<input class="mo-form-input" type="text" name="password" placeholder="{{lang.customers.login.rule_password_placeholder}}">
					</div>
				</div>
				<div class="mo-form-item">
					<div class="mo-form-item-value">
						<div class="main_btn form_btn" id="confirm">{{lang.customers.login.confirm}}</div>
					</div>
				</div>
			</div>
			<script type="text/javascript">
			    (function () {
			    		const rules = {};
			        const form = moi.form("#login-form",rules);
							const passwordNode = $(".mo-form-input[name='password']");
							function submit(){
									if (passwordNode.val()) {
			                const load = moi.nodeShowLoading(this);
			                const params = moi.paramsValueString(form.allValue());
			                moi.ajax({
			                    url: "/module/login",
			                    type: "post",
			                    data: JSON.stringify(params), 
													complete: function () {
                       		load.close();
                    			},
			                    success: function (data) {
														if(data.data.data){
															window.location.reload()	
														}else{
															moi.tooltip({
																placement: "top",
																el: passwordNode,
																timer: 2000,
																space: 0,
																content: "{{lang.general.password_error}}"
															})
														}
			                    }
			                });
			            }else{
										moi.tooltip({
											placement: "top",
											el: passwordNode,
											timer: 2000,
											space: 0,
											content: "{{lang.customers.login.rule_password_placeholder}}"
										})
									}
							}
			        $("#confirm").click(function () {
										submit()
			        });
							passwordNode.on('keypress',function(event){
									if(event.keyCode == "13") {
										submit()
									}
							})
			    })();
			</script>
			{% endif %}
		</div>
	</div>
    
    {% if firewall_rule.type == 1 %}
    <script type="text/javascript">
    	var url = "{{ firewall_rule.redirect_url }}";
    	setTimeout("window.location.replace('"+ url +"')",3000);
    </script>
    {% endif %}
</body>

</html>

